﻿
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<!--<![endif]-->
<head>
    <!-- Basic Page Needs
                ================================================== -->
    <meta content="en-us" http-equiv="Content-Language" />
    <title>markgroves</title>
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!-- Mobile Specific Metas
      ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <!-- CSS
      ================================================== -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" href="/css/base.css" />
    <link rel="stylesheet" href="/css/skeleton.css" />
    <link rel="stylesheet" href="/css/layout.css" />
    <link rel="stylesheet" href="/css/site.css" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="/scripts/jquery-picture.js"></script>
    <script src="/scripts/jquery.isotope.js"></script>
    <!--[if lt IE 9]>
		    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	    <![endif]-->
    <!-- Favicons
	    ================================================== -->
    <link rel="shortcut icon" href="/img/favicon.ico" />

    <script type="text/javascript">
        $(document).ready(function () {

            $(".photo-section").click(function () {

                if ($(".photo-section").css("visibility") == "visible") {

                    $(".photo-section").css("visibility", "hidden");
                    $(".photo_comments").css("visibility", "visible");
                    $(".info_comments").css("display", "none");

                }

            });
            $(".comment_photograph").click(function () {

                $(".photo-section").css("visibility", "visible");
                $(".photo_comments").css("visibility", "hidden");
                $(".info_comments").css("display", "inline");

            });

            $(".photo-section").hover(
                function () {

                    $(".info_comments").css("visibility", "visible");


                },
                function () {

                    $(".info_comments").css("visibility", "hidden");

                });


        });

        $(function () {

            $('picture').picture();

        });

    </script>
    

</head>
<body>
    <div id="header">   
        <div class="container" >
            <div class="one-third column alpha" id="logo">
                <a href="http://localhost:8080">Mark<span class="semi">Groves</span></a>
            </div>
            <div class="two-thirds column omega">
                <nav class="main_nav">
                    <div class="menuitem alpha"><a href="/photographs.html">photographs</a></div>
                    <div class="seperator"></div>
                    <div class="menuitem"><a href="/index.html">articles</a></div>
                    <div class="seperator"></div>
                    <div class="menuitem omega"><a href="/about.html">profile</a></div>
                </nav>
            </div>
        </div> <!-- container --->
    </div>
    <div class="container">
        <div class="row">
            <div class="ten columns home_featured_large">
                <div class="large_photo" style="width=100%;">
                    <img src="/photographs/748/_DSF0546-Edit-2-Edit.jpg" style="width: 100%;" />
                </div>
            </div>
        
            <div class="row" id="home_featured_medium">
                <div class="five columns offset-by-one posts" style="max-height: inherit; overflow: hidden;">
                    <div class="large_photo" style="width=100%;">
                        <img src="/photographs/748/_DSF0546-Edit-2-Edit.jpg" style="width: 100%;" />
                    </div>
                </div>
                <div class="five columns offset-by-one posts" style="max-height: inherit; overflow: hidden; margin-top: 14px;">
                    <div class="large_photo" style="width=100%;">
                        <img src="/photographs/748/_DSF0546-Edit-2-Edit.jpg" style="width: 100%;" />
                    </div>
                </div>
            </div>
            
        </div>
        <div class="row">
            <div class="sixteen columns" id="home_recent_photographs">
                <h5 class="latest_photographs" style="border-bottom: 1px solid black; margin-top: 20px;
                    margin-bottom: 15px; text-transform: uppercase;">recent</h5>
                <div class="two columns alpha">
                    <img src="/photographs/186/_87A9070.jpg" style="width: 100%;" /></div>
                <div class="two columns">
                    <img src="/photographs/186/_87A9144.jpg" style="width: 100%;" /></div>
                <div class="two columns">
                    <img src="/photographs/186/_87A9144.jpg" style="width: 100%;" /></div>
                <div class="two columns">
                    <img src="/photographs/186/_87A9144.jpg" style="width: 100%;" /></div>
                <div class="two columns">
                    <img src="/photographs/186/_87A9144.jpg" style="width: 100%;" /></div>
                <div class="two columns">
                    <img src="/photographs/186/_87A9144.jpg" style="width: 100%;" /></div>
                <div class="two columns">
                    <img src="/photographs/186/_87A9144.jpg" style="width: 100%;" /></div>
                <div class="two columns omega">
                    <img src="/photographs/186/IMG_6194.jpg" style="width: 100%;" /></div>
            </div>
        </div>    </div> <!--container-->                    <style>
                    ul li {
                        margin-bottom: 5px;
                        line-height: 20px;
                        list-style-position: inside;
                        width: 100%;
                    }
                        ul li a {
                            display: block;
                            text-decoration: none;
                            font-size: 12px;
                            border-top: 1px solid transparent;
                            border-bottom: 1px solid transparent;
                        }
                        ul li a:hover {
                            border-top: 1px solid black;
                            border-bottom: 1px solid black;
                            color: black;
                        }
                </style>    <div class="container">
        <div class="row">
            <div class="five columns">
                <div style="float:left; border-bottom: 1px solid black;width: 100%;text-align: left;">recent articles</div>
                <br>
                <ul id="list">
                    <li><a class="postlink" href="/2009/01/02/photography-favorites-of-2008-goals-for-2009.html">Photography Favorites of 2008</a></li>
                    <li><a class="postlink" href="/2008/12/03/25-urban-portraits-in-25-days.html">
                            25 Urban Portraits in 25 Days</a></li>
                    <li><a class="postlink" href="/2008/11/30/storing-lightroom-presets-with-your-catalog.html">
                            Storing Lightroom Presets with your Catalog</a></li>
                    <li><a class="postlink" href="/2008/11/25/canon-5d-mark-ii-now-supported-with-adobe-camera-raw-5-2.html">
                            Canon 5D Mark II now supported with Adobe Camera Raw 5.2</a></li>
                    <li><a class="postlink" href="/2008/11/20/renting-camera-lenses-online.html">
                            Renting Camera Lenses Online</a></li>
                </ul>
            </div>
            <div class="eleven columns featured_article">
                <div style="float:right; border-bottom: 1px solid black;width: 100%;text-align: left;">featured</div>
                <div class="idea">
                    <article>
                        <h1> Bryan Peterson Oregon Workshop </h1>
                        <span class="postdate">13      November, 2008</span>
                        <p>About a month ago I was able to take a three day photography workshop with <a href="http://www.bryanfpeterson.com/" target="_blank">Bryan Peterson</a> of <a href="http://www.amazon.com/gp/product/0817463003?ie=UTF8&amp;tag=markgroves-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=0817463003" target="_blank">Understanding Exposure</a>, <a href="http://www.amazon.com/gp/product/0817441816?ie=UTF8&amp;tag=markgroves-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=0817441816" target="_blank">Learning to See Creatively</a>, etc, along the <a href="http://bryanfpetersonphotoworkshops.com/" target="_blank">Oregon coast</a>.&nbsp; This was an early birthday present, that came up pretty much last minute.&nbsp; I had never been on anything like this previously so I really did not know what to expect.&nbsp; I had a couple of goals for the workshop.&nbsp; First just get out and concentrate on my photography for a few days.&nbsp; Second, push photography out of my normal comfort zone.&nbsp; </p>  
                    </article>					
                
                </div>
            </div>

        </div>
    </div>


    <script type="text/javascript">
        $container = $('#photo_grid');
        $(window).load(function () {

            $container.isotope({

                itemSelector: '.photo_thumb',
                masonry: {

                    columnWidth: 12

                }

            });



        });

        //filter items when filter link is clicked
        $('#filters a').click(function () {

            var selector = $(this).attr('data-filter');
            $container.isotope({ filter: selector });
            return false;

        });


        var $optionSets = $('#filters'),
          $optionLinks = $optionSets.find('a');

        $optionLinks.click(function () {

            var $this = $(this);
            // don't proceed if already selected
            if ($this.hasClass('selected')) {

                return false;

            }
            var $optionSet = $this.parents('#filters');
            $optionSet.find('.selected').removeClass('selected');
            $this.addClass('selected');

            // make option object dynamically, i.e. { filter: '.my-filter-class' }
            var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
            // parse 'false' as false boolean
            value = value === 'false' ? false : value;
            options[key] = value;
            if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
                // changes in layout modes need extra logic
                changeLayoutMode($this, options)

            } else {
                // otherwise, apply new options
                $container.isotope(options);

            }

            return false;

        });

    </script>

</body>
</html>
